<template>
  <div id="address">
    <div class="containner">
      <div class="flex justify-between item-center wrap">
        <template v-for="addr in address.address_list">
          <addr :addr="addr"></addr>
        </template>
        <addr-append></addr-append>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex'

  import Addr from '../components/Addr.vue'
  import AddrAppend from '../components/AddrAppend.vue'

  export default {
    components: {
      'addr': Addr,
      'addrAppend': AddrAppend
    },
    computed: {
      ...mapState(['address'])
    },
    methods: {
      ...mapActions('address', ['get_address_list', 'get_china_list'])
    },
    mounted() {
      this.get_address_list()
      this.get_china_list()
    }
  }
</script>

<style scoped="scoped">
  .address-bar.active {
    box-shadow: 0px 0px 10px #c33;
  }

  .address-bar {
    width: 516px;
    margin: 20px;
    padding: 20px;
    border: 2px dashed transparent;
    border-radius: 6px;
    box-shadow: 0px 0px 10px #eee;
  }

  .address-append-bar {
    width: 516px;
    margin: 20px;
    padding: 20px;
    border: 0px dashed transparent;
    border-radius: 6px;
    box-shadow: 0px 0px 10px #eee;
    cursor: pointer;
  }

  .addr_text {
    width: 476px;
    outline: none;
    padding: 9px 20px;
    border: 1px solid #ddd;
  }

  .append-tag {
    width: 300px;
    padding: 0px 54px;
    margin: 23px 53px;
    border: 1px dashed #eee;
    font-size: 64px;
    font-weight: 900;
  }
</style>
